<template>
  <!-- 这里就是用户表格 -->
  <div>
    <el-table
      ref="multipleTable"
      highlight-current-row
      :data="information"
      tooltip-effect="dark"
      :class="{'header-table':isUser.count>0}"
      style="width: 100%"
      @select="selectUser"
      @select-all="selectUser"
      @selection-change="handleSelectionChange"
      @cell-mouse-enter="immigration"
      @cell-mouse-leave="shiftOut"
    >
      <el-table-column type="selection" align="center" width="45" @click.native="selectUser">
        <!-- <template slot-scope="scope">
          <el-checkbox @click.native="selectUser" />
         <el-checkbox v-else v-show="!scope.row.id_card_status" @click.native="selectUser" />
     </template> -->
      </el-table-column>
      <el-table-column label="QID" align="center" width="120">
        <template slot-scope="scope">{{ scope.row.user_number }}</template>
      </el-table-column>
      <el-table-column
        prop="admission"
        align="center"
        label="住院号"
        width="120"
      >
        <template slot-scope="scope">{{ scope.row.hospital_number }}</template>
      </el-table-column>
      <el-table-column
        prop="name"
        align="center"
        label="姓名"
        show-overflow-tooltip
      >
        <template slot-scope="scope">{{ scope.row.user_name }}</template>
      </el-table-column>
      <el-table-column
        prop="identity"
        align="center"
        label="身份号"
        width="200"
        show-overflow-tooltip
      >
        <template slot-scope="scope">
          <el-button type="text" @click="scope.row.id_card_status=!scope.row.id_card_status">
            <span>{{ !scope.row.id_card_status?scope.row.id_card_number:scope.row.id_card_number.replace(/^(\d{4})\d+(\w{4})$/,"$1****$2") }}</span>
          </el-button>

        </template>
      </el-table-column>
      <el-table-column
        prop="gender"
        align="center"
        label="性别/年龄"
        show-overflow-tooltip
      >
        <template slot-scope="scope">{{ scope.row.user_sex==0?'未填':scope.row.user_sex==1?'男':'女' }}/{{ scope.row.user_age==0?'未填':scope.row.user_age }}</template>
      </el-table-column>
      <!-- <el-table-column label="来源" align="center" width="100">
        <template slot-scope="scope">{{ scope.row.user_from_text?scope.row.user_from_text:'保密' }}</template>
      </el-table-column> -->
      <el-table-column
        prop="creation"
        align="center"
        label="创建时间"
        show-overflow-tooltip
      >
        <template slot-scope="scope">{{ scope.row.create_date.substring(0,10) }}</template>
      </el-table-column>
      <el-table-column
        label="操作"
        align="center"
        fixed="right"
        width="150"
        class-name="small-padding fixed-width"
      >
        <template slot-scope="scope">
          <el-tooltip
            content="暂无编辑权限"
            placement="top"
            effect="light"
            :disabled="getAuth('3')"
          >
            <div>
              <el-button :disabled="!getAuth('3')" type="primary" size="mini" @click="read(scope.row)">阅读
              </el-button>
              <el-button :disabled="!getAuth('3')" type="success" size="mini" @click="compile(scope.row)">编辑
              </el-button>
            </div>
          </el-tooltip>
        </template>

      </el-table-column>
    </el-table>
    <!-- 这里需要总条数大于10条才显示 -->
    <div class="block headers">
      <el-pagination
        class="pagination"
        background
        :page-sizes="[10,20,30,40,50]"
        :page-size="10"
        layout="total, prev, pager, next, slot, jumper"
        :total="totalNumber"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      >
        <!-- <span class="pageSizeInput">
          <el-input v-model.number="pageSize" class="pageSizeBorder" @input="handlePageSize" /> 条/页
        </span> -->
      </el-pagination>
    </div>
  </div>
</template>

<script>
//  获取数据库病例列表
import { getUserList } from '@/api/case'
export default {
  props: {
    information: { type: Array, default: null }, // 这个就是渲染的内容
    totalNumber: { type: Number, default: null }, // 这个就是总数量
    newSearch: { type: String, default: '' } // 用户搜索的内容
  },
  data() {
    return {
      newIdentity: true, // 决定身份证是否全部显示
      multipleSelection: [],
      isUser: { statue: false, count: 0 }, // 选中病人
      newCurrentPage: '1', // 当前页 默认第一页
      isok: false
      // informations: [
      //   {
      //     create_data: '202222',
      //     create_time: '122222',
      //     create_type: 1,
      //     gospital_number: '',
      //     user_age: 0,
      //     user_from_text: '录入用户',
      //     user_name: '第一个',
      //     user_number: 'Q201231313',
      //     user_sex: 0

      //   }
      // ]
    }
  },
  // watch: {
  //   isUser() {
  //     // 给父组件发送信息
  //     this.$emit('sendIsUser', this.isUser)
  //   }
  // },
  computed: {
    // 判断用户是否有权限
    getAuth(index) {
      return index => {
        const auth = this.$store.state.database.information.auths.auth
        const res = auth.indexOf(index)
        if (res === -1) {
          return false
        } else {
          return true
        }
      }
    }
  },
  created() {
    console.log('ref', this.$refs)
    console.log('this.information', this.information)
  },
  methods: {
    // 移出
    shiftOut(row) {
      // 鼠标移出
      // console.log('eeee', row)
      // this.information.forEach((item) => {
      //   if (item.id === row.id) {
      //     // 就改变 item.id_card_status的值
      //     item.id_card_status = true
      //   }
      // })
      this.$forceUpdate()
    },
    // 移入
    immigration(row) {
      // 鼠标移入
      // console.log('eeee', row)
      // this.information.forEach((item) => {
      //   if (item.id === row.id) {
      //     // 就改变 item.id_card_status的值
      //     item.id_card_status = false
      //   }
      // })
      this.$forceUpdate()
    },
    isNewIdentity() {
      console.log('我被触发了')
      this.newIdentity = !this.newIdentity
    },
    // 封装病人列表信息
    async newGetUserList(database_id, search, page, page_sum, order_sort) {
      const res = {
        database_id,
        search,
        page,
        page_sum,
        order_sort
      }
      const list = await getUserList(res)
      console.log('listttttttttttt', list)
      // 传递数据给父组件赋值
      this.$emit('sendUser', { information: list.data.data.list, totalNumber: list.data.data.total })
      this.$store.dispatch('database/setInformation', list.data.data) //  将内容存到vuex中
      // this.$store.dispatch('database/setInformation', res.list)
    },
    // 点击阅读跳转阅读页
    read(e) {
      console.log('点击阅读跳转阅读页', e)
      this.$store.dispatch('medicalDetails/setNewReadorcompile', null)
      // 需要发送请求拿数据
      // 然后需要用一个新的页面打开
      const { href } = this.$router.resolve({ name: 'Detailed', query: { name: e.user_name, id: e.id, readorcompile: 0 }})
      window.open(href, '_blank')
      // 将用户选中的数据存到vuex中
      this.$store.dispatch('database/setDetailed', e)
    },
    // 点击编辑跳转编辑页
    compile(e) {
      console.log('点击编辑跳转编辑页', e)
      // 清理数据
      this.$store.dispatch('medicalDetails/deletedDatas')
      // 用户点击编辑
      // 需要发送请求拿数据
      // 然后需要用一个新的页面打开
      this.$store.dispatch('medicalDetails/setNewReadorcompile', null)
      const { href } = this.$router.resolve({ name: 'Detailed', query: { name: e.user_name, id: e.id, readorcompile: 1 }})
      window.open(href, '_blank')
      // 将用户选中的数据存到vuex中
      this.$store.dispatch('database/setDetailed', e)
      // 渲染数据
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`)
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`)
      // 这里有多少去到多少条数据显示多少条
      // 点击这里就需要修改条数
      // 发送请求
      // await getUserList({})
      this.$emit('cancelSelect')
      this.newGetUserList(this.$store.getters.database_id, this.newSearch, val, '10', 'DESC')
    },
    toggleSelection(rows) {
      if (rows) {
        rows.forEach(row => {
          this.$refs.multipleTable.toggleRowSelection(row)
        })
      } else {
        this.$refs.multipleTable.clearSelection()
      }
    },
    handleSelectionChange(val) {
      this.multipleSelection = val
    },
    // 改变选中状态
    changeIsUser() {
      const _selectData = this.$refs.multipleTable.selection
      if (_selectData.length > 0) {
        this.isUser = { statue: true, count: _selectData.length }
      } else {
        this.isUser = { statue: false, count: _selectData.length }
      }// 给父组件发送信息
      console.log('this.isUser', this.isUser, _selectData)
      this.$emit('sendIsUser', this.isUser)
      // 传给父组件
      this.$emit('Delete_users', _selectData)
    },
    // 选中病人
    selectUser() {
      this.changeIsUser()
    },
    // 取消选择
    cancelSelect() {
      this.$refs.multipleTable.clearSelection()
      this.isUser = {}
    }
  }
}
</script>
<style>
/* 表格复选框动态悬浮效果 */
.has-gutter .el-table-column--selection .el-checkbox{
  display: none;
}
.el-table__row .el-table-column--selection .el-checkbox{
  display: none;
}
.el-table__row:hover .el-table-column--selection .el-checkbox{
  display: inline-block;
}
.header-table .el-table__body-wrapper .el-table__row  .el-checkbox{
  display: inline-block;
}
.header-table .has-gutter .el-table-column--selection .el-checkbox{
  display: inline-block;
}

</style>
<style lang="scss" scoped>

.headers {
  padding: 3% 1%;
  /* background-color: #fff; */
}

/* /deep/ .el-checkbox__inner{
    display: none;
  } */

</style>
